<template>
    <div class="payIndex">
        <el-header>计费管理 / 缴费类性管理</el-header>
        <el-main>
            <div class="mainLeft">
                <el-input v-model="userInfo.paymoney" placeholder="项目价格" style="width:200px;margin-right:20px"
                    clearable></el-input>
                <el-select v-model="userInfo.paystatus" placeholder="通知状态">
                    <el-option label="已通知" :value=1></el-option>
                    <el-option label="未通知" :value=2></el-option>
                </el-select>
            </div>
            <div class="mainRight">
                <span data-v-51f26864="" class="list-title"
                    style="float: left; margin-left: 30px; font-weight: bold; font-size: 1.5em;">电费目录</span>
                <span>
                    <el-button type="primary" size="middle" @click="handleInquire">查询</el-button>
                    <el-button type="success" size="middle" @click="handleAdd">新增</el-button>
                    <el-button type="warning" size="middle" @click="handleFlushed">刷新 </el-button>
                    <el-button type="danger" size="middle" @click="handleExport">导出</el-button>
                </span>
            </div>
        </el-main>
        <div class="body">
            <el-tree :data="data" ref="tree" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"
                node-key="id"></el-tree>
            <el-table :data="tableData" border style="width: 100%" align="ceter">
                <el-table-column prop="payname" label="缴费项目名称" align="center">
                </el-table-column>
                <el-table-column prop="paylevel" label="缴费项目优先级" align="center">
                </el-table-column>
                <el-table-column prop="paynum" label="缴费用量/时长" align="center">
                </el-table-column>
                <el-table-column prop="paymoney" label="项目价格" align="center">
                </el-table-column>
                <el-table-column prop="paytime" label="创建时间" align="center">
                    <template slot-scope="scope">
                        <span style="text-align: center;">{{ scope.row.paytime.substring(0, 10) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="通知人" align="center">
                    <template slot-scope="scope">
                        <span style="text-align: center;">{{ scope.row.username == null ? '暂无' : scope.row.username
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="paystatus" label="状态" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.username == 1 ? '已通知' : '未通知' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="220px" style="display: flex;" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleNotice(scope.row)">通知</el-button>
                        <el-button style="color: rgb(98, 168, 234);" @click="handleView(scope.row)">查看</el-button>
                        <el-button style="border-color: #fbc4c4;" @click="handleDel(scope.row)">作废</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Pagination :total="total" @SizeChange="changeCount" @CurrentChange="changePage">
        </Pagination>
        <el-dialog title="计费通知" :visible.sync="dialogVisible" width="60%">
            <div style="display: flex;">
                <el-input placeholder="请用户输入账号" style="width: 300px; margin-right: 10px;"
                    v-model="modelInfo.username"></el-input>
                <el-button type="primary" @click="getListModel"><i class="el-icon-search"></i></el-button>
                <el-button type="warning" @click="modelInfo.username = ''">重置</el-button>
            </div>
            <el-table :data="modelData" border style="width: 100%" align="ceter" ref="singleTable"
                @current-change="handleCurrentChange" highlight-current-row>
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="username" label="用户账号" align="center">
                </el-table-column>
                <el-table-column prop="homeaddress" label="序家庭住址号" align="center">
                </el-table-column>
                <el-table-column prop="type" label="类型" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.type === 4 ? '普通用户' : '管理员' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="coststatus" label="缴费状态" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coststatus === 1 ? '已缴费' : '未缴费' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :total="total1" @SizeChange="changeCount" @CurrentChange="changePage">
            </Pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="handleClose">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from "@/components/Pagination/Pagination.vue";
export default {
    components: {
        Pagination
    },
    data() {
        return {
            //模态框选中行
            currentRow: { u_id: 0, token: '', c_id: 0, coststatus: 0, paystatus: 0, username: 0 },
            title: '',
            dialogVisible: false,
            total: 0,
            total1: 0,
            delData: {},
            tableData: [],
            modelData: [],
            NoticeData: {
                username: '',
                c_id: 978,
                coststatus: 2,
                paystatus: 1,
                token: ''
            },
            userInfo: {
                c_id: 1,
                currPage: 0,
                pageNum: 9,
                paymoney: '',
                paystatus: '',
                username: '',
            },
            modelInfo: {
                username: '',
                currPage: 0,
                pageNum: 9
            },
            data: [
                {
                    id: 1,
                    label: '缴费项目',
                    children: [
                        {
                            id: 2,
                            label: '电费项目',
                            children: [{
                                id: 7,
                                label: '电费目录表'
                            }],
                        },
                        {
                            id: 3,
                            label: '水费项目',
                            children: [{
                                id: 8,
                                label: '水费固定月目录表',
                            }, {
                                id: 9,
                                label: '水费按量计价目录表',
                            }],
                        },
                        {
                            id: 4,
                            label: '天然气项目',
                            children: [{
                                id: 10,
                                label: '天然气目录表',
                            }],
                        },
                        {
                            id: 5,
                            label: '物业费项目',
                            children: [{
                                id: 11,
                                label: '物业费目录表',
                            }],
                        },
                        {
                            id: 6,
                            label: '宽度费项目',
                            children: [{
                                id: 12,
                                label: '宽带费目录表',
                            }],
                        }
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            downloadLoading: false,
            treeData: {
                c_id: 9,
                paymoney: null,
                paystatus: null,
                currPage: 0,
                pageNum: 9
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        updateKeyChildren(key, data) {
            console.log(key, data, '1111111111');
        },
        async getList() {
            await this.$Axios({
                url: '/cost/getCostData',
                method: 'get',
                data: this.userInfo,
                success: ((res) => {
                    this.tableData = res.data
                    console.log(this.tableData);
                    this.total = res.total
                })
            })
        },
        async DelList() {
            await this.$Axios({
                url: '/cost/delCostData',
                method: 'get',
                data: this.delData,
                success: ((res) => {
                    this.getList()
                })
            })
        },
        async getListModel() {
            await this.$Axios({
                url: '/users/getUserList',
                method: 'get',
                data: this.modelInfo,
                success: ((res) => {
                    this.modelData = res.data
                    this.total1 = res.total
                })
            })
        },
        //确认通知
        async getListNotice() {
            await this.$Axios({
                url: '/cost/updateCostData',
                method: 'post',
                data: this.currentRow,
                success: ((res) => {
                    console.log(res, '通知成功');
                    this.$message.success('通知成功')
                })
            })
        },
        //分页
        changeCount(val) {
            if (this.title == '计费通知') {
                this.modelInfo.pageNum = val
                this.getListModel()
                return
            }
            this.userInfo.pageNum = val
            this.getList()
        },
        changePage(val) {
            if (this.title == '计费通知') {
                this.modelInfo.currPage = val
                this.getListModel()
                return
            }
            this.userInfo.currPage = val
            this.getList()
        },
        handleNodeClick(data) {
            this.userInfo.c_id = data.id
            this.getList()
        },
        // 查询按钮
        handleInquire() {
            this.getList()
        },
        //新增按钮
        handleAdd() {
            this.$router.push(
                {
                    path: '/pay/payAdd',
                }
            )
        },
        //刷新按钮
        handleFlushed() {
            this.userInfo = {
                c_id: 7,
                currPage: 0,
                pageNum: 9,
                paymoney: '',
                paystatus: ''
            }
            this.getList()
        },
        //导出按钮
        handleExport() {
            this.downloadLoading = true
            import('@/utils/Export2Excel').then(excel => {
                const tHeader = ['缴费项目名称', '缴费项目优先级', '项目用量/时长', '项目价格', '创建时间', '通知人']
                const filterVal = ['payname', 'paylevel', 'paynum', 'paymoney', 'paytime', 'username']
                excel.export_json_to_excel2(
                    tHeader,
                    this.tableData,
                    filterVal,
                    '缴费列表存储信息'
                )
                this.downloadLoading = false
            })
        },
        handleClose(done) {
            console.log(this.currentRow);
            this.$confirm('确认通知？')
                .then(_ => {
                    this.title = '',
                        this.modelInfo = {
                            username: '',
                            currPage: 0,
                            pageNum: 9
                        }
                    this.getListNotice()
                    this.currentRow = { u_id: 0, token: '', c_id: 0, coststatus: 0, paystatus: 0, username: 0 }
                    this.dialogVisible = false
                })
                .catch(_ => {
                    this.$message.error('已取消通知')
                });
        },
        //通知
        handleNotice(val) {
            this.currentRow = { u_id: 0, token: '', c_id: 0, coststatus: 0, paystatus: 0, username: 0 }
            this.title = '计费通知'
            this.getListModel()
            this.dialogVisible = true
        },
        handleView(val) {
            console.log(val, 'val');
            this.$router.push({
                path: '/pay/payView',
                query: {
                    value: JSON.stringify(val)
                }
            })
        },
        //模态框取消按钮
        handleCancel() {
            this.dialogVisible = false
            this.title = ''
            this.modelInfo = {
                username: '',
                currPage: 0,
                pageNum: 9
            }
        },
        //模态框选中行
        handleCurrentChange(val) {
            this.currentRow.c_id = val.c_id;
            this.currentRow.u_id = val.id;
            this.currentRow.coststatus = val.coststatus;
            this.currentRow.paystatus = val.parkstatus;
            this.currentRow.username = val.username;
            this.currentRow.token = sessionStorage.getItem('token')
        },
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        handleDel(val) {
            this.delData.id = val.id
            this.delData.token = sessionStorage.getItem('token')
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.DelList()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
}
</script>
<style lang="scss" scoped>
.payIndex {

    .el-main {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 0;

        .mainRight {
            width: 66.7%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }

    .body {
        display: flex;

        .el-tree {
            padding-left: 5px;
            padding-right: 5px;
            width: 35%;
        }
    }

    .pagination-container {
        text-align: right;
    }
}

.el-header {
    font-size: 16px;
    font-weight: 600;
    padding: 1em
}

::v-deep .cell {
    display: flex;
}
</style>